<template>
    <el-row>
        <tree-select
                v-model="form.parentId"
                :options="menuOptions"
                :objMap="{
                           value: 'id',
                           label: 'menuName',
                           children: 'children'
                        }"
                placeholder="选择上级菜单"
        />
    </el-row>
</template>

<script>
    import request from "@/utils/request";
    import TreeSelect from '@/components/TreeSelect'

    export default {
        name: "Home",
        components: {TreeSelect},
        data() {
            return {
                form: {
                    id: undefined,
                    parentId: 0,
                    menuName: undefined,
                    isFrame: "1",
                    isCache: "0",
                    visible: "0",
                    status: "0"
                },
                menuList: [],
                menuOptions: [],
                title: '',
                refreshTable: true,

            }
        },


        //页面加载完立即执行的方法
        mounted() {
            this.getTreeSelect()
        },

        methods: {
            //查询方法
            load() {
                //axios中 get请求无法传递复杂json对象需要使用qs.stringify()对参数进行序列化
                request.get("/sys/menu/menuTree", {
                    params: {
                        menuName: this.queryParams.menuName,
                    },
                }).then(res => {
                    if (res.code == 0) {
                        this.tableData = res.data
                        this.total = res.data.total
                    }
                })
            },

            /** 查询菜单下拉树结构 */
            getTreeSelect() {
                request.get("/sys/menu/menuTree").then(res => {
                    this.menuOptions=res.data;
                });
            },
        }
    }
</script>
